<template>
    <div class="page-new">
        <div class="topbar">
            <span class="back" @click="onBack">返回</span>
            <span class="title">新朋友</span>
        </div>
        <div class="list">
            <div class="item" v-for="(item,index) in newList" :key="index">
                <div class="left">
                    <div class="avatar">
                        <img :src="item.avatar">
                    </div>
                </div>
                <div class="center">
                    <div class="name">{{item.nickname}}</div>
                    <div class="desc">申请消息:{{item.msg}}</div>
                </div>
                <div class="right">
                    <span @click="onNo(item.id)">拒绝</span>
                    <span @click="onYes(item.id,item.msg)">接受</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'PageNew',
    methods: {
        onBack() {
            this.$router.back(-1)
        },
        onNo(e) {
            var obj = {
                type: 'oper',
                fromId: e,
                toId: this.$store.state.userInfo.id,
                token: this.$store.state.userInfo.token,
                value: 3
            }
            var data = JSON.stringify(obj);
            this.ws.send(data);
        },
        onYes(e,msg) {
            var obj = {
                type: 'oper',
                fromId: e,
                toId: this.$store.state.userInfo.id,
                token: this.$store.state.userInfo.token,
                msg: msg,
                value: 1
            }
            var data = JSON.stringify(obj);
            this.ws.send(data);
        }
    },
    computed: {
        newList() {
            return this.$store.state.newList
        }
    }
}
</script>

<style lang="scss" scoped>
@import '../assets/scss/theme.scss';
.page-new{
    padding-top:39px;
    width:100vw;
    height:100vh;
    overflow: auto;
    @include background_color('background_color7');
    .topbar{
        position: fixed;
        width:100%;
        top:0;
        left:0;
        display: flex;
        padding:10px;
        font-size:14px;
        justify-content: space-between;
        @include background_color('background_color4');
        @include font_color('font_color7');
        .title{
            position: absolute;
            left:50%;
            transform:translateX(-50%);
        }
    }
    .list{
        padding:10px;
        .item{
            padding:6px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .left{
                .avatar{
                    width:45px;
                    height:45px;
                    border-radius:10px;
                    overflow: hidden;
                    img{
                        width:100%;
                        height:100%;
                        object-fit: cover;
                        display: block;
                    }
                }
            }
            .center{
                margin-left:8px;
                margin-right:10px;
                flex:1;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space:nowrap;
                .name{
                    font-size:16px;
                    margin-bottom:5px;
                    @include font_color('font_color1');
                }
                .desc{
                    font-size:14px;
                    @include font_color('font_color9');
                }
            }
            .right{
                span{
                    font-size:0.875rem;
                    padding:3px 8px;
                    border-radius:50px;
                    @include font_color('font_color3');
                    @include background_color('background_color6');
                    &:nth-child(1){
                        margin-right:5px;
                    }
                }
            }
        }
    }
}
</style>